<template>
    <div class="header">
        <div class="header__icon iconfont" @click="handleBackClick">&#xe60e;</div>
        <div class="header__tlite">管理收货地址</div>
        <div class="header__new" @click="handleNewClick">新建</div>
    </div>
    <div class="main">
        <div class="main__warp">
            <div class="main__warp__mySite">我的收货地址</div>
            <template v-for="item in dataList" :key="item._id">
                <router-link :to="{path: `/mymess/mysite/compileSite/${item._id}`}">
                    <div class="main__warp__item">
                        <div class="main__warp__item__mess">
                            <div class="main__warp__item__mess__nameOrNumber">
                                <span class="main__warp__item__mess__nameOrNumber__name">{{item.name}}</span>
                                <span class="main__warp__item__mess__nameOrNumber__phoneNumber">{{item.phone}}</span>
                            </div>
                            <div class="main__warp__item__mess__site">
                                {{item.city}}{{item.department}}{{item.houseNumber}}
                            </div>
                        </div>
                        <div class="main__warp__item__to iconfont">&#xe649;</div>
                    </div>
                </router-link>
            </template>
        </div>
    </div>
</template>

<script>
import '../../style/iconfont.css'
import './components/header/style/style.scss'
import { get } from '../../utils/axiosPost'
import { useRouter } from 'vue-router'
import { reactive, toRefs } from 'vue'
export default {
  name: 'MySite',
  setup () {
    const router = useRouter()

    const dataObj = reactive({ dataList: [] })
    // 获取地址列表
    const result = get('/api/user/address')
    result.then(res => {
      dataObj.dataList = res
    }).catch(e => {
      console.log(e)
    })
    const handleBackClick = () => {
      router.back()
    }
    const handleNewClick = () => {
      router.push({ name: 'NewSite' })
    }

    const { dataList } = toRefs(dataObj)
    return { handleBackClick, handleNewClick, dataList }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/colorValue.scss';
@import '../../style/mixinApi.scss';
a {
    text-decoration: none;
}
.main {
    @include mainPositionFn();
    overflow-y: auto;
    &__warp {
        margin:0 .18rem;
        &__mySite {
            text-align: left;
            font-size: .14rem;
            color: $TextColor;
            margin:.16rem 0 .12rem 0;
        }
        &__item {
            margin-bottom: .16rem;
            background: $whiteColor;
            border-radius: .04rem;
            padding:.18rem .16rem;
            display: flex;
            align-items: center;
            &__mess {
                flex:1;
                padding-right: .39rem;
                &__nameOrNumber {
                    padding-bottom: .08rem;
                    &__name, &__phoneNumber {
                        line-height: .2rem;
                        font-size: .14rem;
                        color: $deepGreyColor;
                    }
                    &__name{
                        display: inline-block;
                        width: .56rem;
                    }
                    &__phoneNumber {
                        margin-left: .94rem;
                    }
                }
                &__site {
                    font-size: .14rem;
                    color: $TextColor;
                    line-height: .2rem;
                }
            }
            &__to {
                font-size: .16rem;
                color: $deepGreyColor;
            }
        }
    }

}
</style>
